<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="johnye">
<meta name="copyright" content="">
<meta name="description" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link type="text/css" rel="stylesheet" href="youxi/css/common.css">
<link type="text/css" rel="stylesheet" href="youxi/css/aui.css">
<link type="text/css" rel="stylesheet" href="youxi/css/aui2.css">
<link type="text/css" rel="stylesheet" href="youxi/css/end.css">

<link type="text/css" rel="stylesheet" href="youxi/css/plays.css">
<link type="text/css" rel="stylesheet" href="youxi/css/room_pipei.css">
<script type="text/javascript" src="youxi/js/jquery-1.8.2.min.js"></script>

<script>
var ws;
function init() {
	var host = "ws://47.104.8.67:8282";
	try {
		ws = new WebSocket(host);
		ws.onopen = function(){
			console.log('连接成功');
			ws.send("login:{$data.user.id}");
			//ws.send("loginout:{$data.vsuser.id}-0");
			console.log('发送登陆数据完毕');
		};
		ws.onmessage = function (e) { 
			
			//监听对手出牌并直接进入到结果
			if(e.data.indexOf("gamecontent")>=0){
				var n=e.data.split("-");
				//alert(n[1]);
				$("#vscontent").val(n[1]);
				if($("#vscontent").val()!=0 && $("#game_content").val()!=0){
					$("#content2").hide();
					$("#content3").show(function(){
						fun("监听手牌进入结果");
					});
				}
			}
			//监听小局上报结果
			if(e.data=="gameend-1"){
				window.location.href="index.php?ctl=game&act=doing&deal_id={$data.deal_id}";
			}
			console.log('监听消息:'+e.data);
		};
		ws.onclose = function (msg) {
			console.log('关闭连接');
		};
	}
	catch (ex) {
		console.log(ex);
	}
}init();

function send(msg) {
	try { 
		ws.send(msg); 
	} catch (ex) { 
		console.log(ex);
	}
}
//刷新或关闭
window.onbeforeunload = function () {
	try {
		//ws.send("loginout:{$data.vsuser.id}-1");
		ws.close();
		ws = null;
	}
	catch (ex) {
		console.log(ex);
	}
};
</script>

</head>

<body>

<header class="header">
 <div class="lf left_menus"><a href="javascript:alert('游戏过程禁止退出');" id="left_menus_cont"><i class="iconfont fontcolor4 f20">&#xe610;</i></a></div>
 <div class="lf logos">房间号：{$data.deal_id}</div>

</header>
<!--header end-->
<div class="main_warp"> 

	<div class="tg_other fixed_top" style="display:none">
		<div class="tg_other_lf lf">
			<img src="{$data.vsuser.user_logo}">
		</div>

		<div class="tg_other_rt rt">
			<ul class="tg_nav">
			<li>名称：<span>{$data.vsuser.user_name}</span></li>
			<li>ID：<span>{$data.vsuser.id}</span></li>
			<li>江湖段位：<span>{$data.vsuser.total_score}</span></li>
			<li>当前胜率：<span>70%</span></li>     
			<div class="clear"></div>
			</ul>
		</div>

		<div class="clear"></div>  
	</div>
	<div class="jiudiv jiutop" id="vsjiuping"  style="display:none">
		<img src="youxi/images/jiu.png" >
		<img src="youxi/images/jiu.png">
	</div>
	<!--对方 end-->

	<div class="jiudiv jiubottom" id="myjiuping"  style="display:none">
		<img src="youxi/images/jiu.png">
		<img src="youxi/images/jiu.png">
	</div>
	<div class="tg_other fixed_bottom"  style="display:none">
	<div class="tg_other_lf rt">
		<img src="{$data.user.user_logo}">
	</div>

	<div class="tg_other_rt rt">
		<ul class="tg_nav">
		<li>名称：<span>{$data.user.user_name}</span></li>
		<li>ID：<span>{$data.user.id}</span></li>
		<li>江湖段位：<span>{$data.user.total_score}</span></li>
		<li>当前胜率：<span>70%</span></li>
		<div class="clear"></div>
		</ul>
	</div>

	<div class="clear"></div>  
	</div>
	
	<script>
	if (!localStorage.zhan){
		localStorage.zhan=1;
	}
   if (!localStorage.fangqi){
		localStorage.fangqi=0;
	}else{		
		//我掉个酒瓶子
		$(".jiubottom").find("img").each(function(k,v){ 
			if(localStorage.fangqi>k){
				$(v).addClass("jiu");
			}
		});
	}
   if (!localStorage.shu){
		localStorage.shu=0;
	}else{
		//我掉个酒瓶子
		$(".jiubottom").find("img").each(function(k,v){ 
			if(localStorage.shu>k){
				$(v).addClass("jiu");
			}
		});
	}
   if (!localStorage.ying){
		localStorage.ying=0;
	}else{
		//对方掉酒瓶子
		$(".jiutop").find("img").each(function(k,v){ 
			if(localStorage.ying>k){
				$(v).addClass("jiu");
			}
		});
	}
	//正常动画
	function donghua2(){
		$(".fixed_top").show();
		$(".jiutop").show();
		$(".fixed_bottom").show();	
		$(".jiubottom").show();
		setTimeout(function(){ 
			$("#content0").hide();	
			$("#content1").show();
		},500);
	}	

	donghua2();
	</script>

	   <!--游戏页面 2 手势-->
		<div class="play_center_cont plf" id="content2" style="">
		   <div class="tishiyu">
			   <img src="youxi/images/rzjh.png"><a href="#">现在请双方出招</a>
		   </div>
		   <div class="clear"></div> 
		   
		   <div class="daojishi"><p id="miao">20</p></div>
		   
			<div class="main_shiwu">
			<div class="shiwu_juese">
				<div class="shiwu_zy">
				<div class="zuoshou">左手</div>
				<div class="youshou">右手</div>
				<div class="clear"></div>
				</div>
				<ul class="shiwu_list">
					<li class="shiwu_ant" onclick="zuoshou(0)" id="zuoshou0"><a href="#"><img src="youxi/images/m6_03.png"></a></li>
					<li class="" onclick="zuoshou(5)" id="zuoshou5"><a href="#"><img src="youxi/images/m1_03.png"></a></li>
					<li class="shiwu_ant" onclick="youshou(0)" id="youshou0"><a href="#"><img src="youxi/images/m6_03.png"></a></li>
					<li class="" onclick="youshou(5)" id="youshou5"><a href="#"><img src="youxi/images/m1_03.png"></a></li>
					<div class="clear"></div>
				</ul>

				<ul class="shiwu_list_num">
					<li class="shiwu_ant" onclick="xuanze(0)" id="xuanze0"><a href="#"><p>没有</p></a></li>
					<li class="" onclick="xuanze(5)" id="xuanze5"><a href="#"><p>五</p></a></li>
					<li class="" onclick="xuanze(10)" id="xuanze10"><a href="#"><p>十</p></a></li>
					<li class="" onclick="xuanze(15)" id="xuanze15"><a href="#"><p>十五</p></a></li>
					<li class="" onclick="xuanze(20)" id="xuanze20"><a href="#"><p>二十</p></a></li>
					<div class="clear"></div>
				</ul>


				<div class="ant_sure" id="pdiv" onclick="p()"><a href="#"><img src="youxi/images/ant_green.png"></a></div>
			</div>
			</div>
			
		</div>
		<input type="hidden" value="0" id="game_content" />
		<input type="hidden" value="0" id="vscontent" />
		<input type="hidden" value="0" id="game_p_z" />
		<input type="hidden" value="0" id="game_p_y" />
		<input type="hidden" value="0" id="game_p_num" />
		<input type="hidden" id="data_id" value="{$data.deal_id}"/>
		<script>
		//左手0 5
		function zuoshou(num){
			$("#game_p_z").val(num);
			$("#zuoshou0").attr("class","");
			$("#zuoshou5").attr("class","");
			$("#zuoshou"+num).attr("class","shiwu_ant");
		}
		//右手0 5
		function youshou(num){
			$("#game_p_y").val(num);
			$("#youshou0").attr("class","");
			$("#youshou5").attr("class","");
			$("#youshou"+num).attr("class","shiwu_ant");
		}
		<!--没有0 五5 十10 十五15 二十20-->
		function xuanze(num){
			$("#game_p_num").val(num);
			$(".shiwu_list_num").find('li').each(function(k,v){  
				$(v).attr("class","");
			});  
			$("#xuanze"+num).attr("class","shiwu_ant");
		}
		//提交
		function p(){
			$('#pdiv').hide();
			var val=$("#game_content").val($("#game_p_z").val()+"|"+$("#game_p_y").val()+"|"+$("#game_p_num").val());
			var data_id=$("#data_id").val();
			send("gamecontent:{$data.vsuser.id}-"+$("#game_content").val());
			
			if($("#game_content").val()!=0 && $("#vscontent").val()!=0){
				$("#content2").hide();
				$("#content3").show(function(){
					fun("点击按钮进入结果");
				});
			}
		}
		function dumiao(txt){
			console.log("dumiao:"+txt);
			//读秒前重置出拳
			$("#miao").html(20)
			$("#game_content").val(0);
			$("#vscontent").val(0);
			zuoshou(0);
			youshou(0);
			xuanze(0);
			$('#pdiv').show();       
			var tim2=setInterval(function (){
                var num=$("#miao").html();
				num--;         
                $("#miao").html(num);
				if(num==1){
					$('#pdiv').hide();
				}
                if(num==0){   	
					clearInterval(tim2);
					//时间到 跳转结果
					$("#content2").hide();
					$("#content3").show(function(){
						fun("游戏秒数进入结果");
					});
                }
				if(num<0){
					clearInterval(tim2);
				}
            },1000);       
		}dumiao("非单页应用")
		</script>
	   <!--游戏页面 3 出拳-->
	   <div class="play_center_cont plf" id="content3" style="display:none">
			<div class="main_lbj">
		
			<div class="chushoushi_up">
			   <a href="#">
					<img src="" id="duimian_tu1" style="margin-top:-260px;-webkit-transform: rotate(180deg);margin-left: 15%;float: left;">
					<img src="" id="duimian_tu2" style="margin-top:-260px;-webkit-transform: rotate(180deg);margin-left: 15%;float: left;">
					<div class="clear"> </div>
					<p style="display:none;" id="duimian_zi"></p>
			   </a>
			</div>
			
			<div class="chushoushi_down">
			   <a href="#">
					<p style="display:none;" id="my_zi"></p>
					<div class="clear"> </div>
					<img src="" id="my_tu1" style="margin-bottom:-260px;margin-left: 15%;float: left;">
					<img src="" id="my_tu2" style="margin-bottom:-260px;margin-left: 15%;float: left;">
			   </a>
			</div>
			</div>
			<script>
			function fun(txt){
				$("#miao").html(-1);
				console.log('fun'+txt);
				$("#huihe_num1").html(localStorage.zhan);
				$("#huihe_num2").html(localStorage.zhan);
				var data_id=$("#data_id").val();
				
				//console.log(data);return;
				var vs = $("#vscontent").val();//左-右-数字
				var my = $("#game_content").val();//左-右-数字
				var vs_n=vs.split("|");
				var my_n=my.split("|");
				var vszi='';
				var myzi='';
				switch(vs_n[2]){
					case "0": vszi="没有";break;
					case "5": vszi="五";break;
					case "10": vszi="十";break;
					case "15": vszi="十五";break;
					case "20": vszi="二十";break;
					default:vszi="无";
				}
				switch(my_n[2]){
					case "0": myzi="没有";break;
					case "5": myzi="五";break;
					case "10": myzi="十";break;
					case "15": myzi="十五";break;
					case "20": myzi="二十";break;
					default:myzi="无";
				}
				$("#duimian_tu1").attr("src","youxi/images/game_6_"+vs_n[0]+".png");
				$("#duimian_tu2").attr("src","youxi/images/game_6_"+vs_n[1]+".png");
				$("#duimian_zi").html(vszi);
				
				$("#my_tu1").attr("src","youxi/images/game_6_"+my_n[0]+".png");
				$("#my_tu2").attr("src","youxi/images/game_6_"+my_n[1]+".png");
				$("#my_zi").html(myzi);
				//动画效果
				go3a();
				go3b();
				//return;
				var right_num=vs_n[0]*1+vs_n[1]*1+my_n[0]*1+my_n[1]*1;
				if( (vs_n[2]==my_n[2]) || (vs_n[2]!=right_num && my_n[2]!=right_num) ){
					//平局
					//alert('此战平局，再来');
					//反向动画效果
					setTimeout(function(){
						go3aa();
						go3bb();
						setTimeout(function(){
							$("#content3").hide();
							$('#pdiv').show();
							$("#content2").show();
							dumiao("平局");
						},1500);
					},1500);
					return;
				}
				
				if( vs_n[2]==right_num ){
					//我输
					localStorage.zhan=Number(localStorage.zhan) +1;
					localStorage.shu=Number(localStorage.shu) +1;
					
					//我掉个酒瓶子
					$(".jiubottom").find("img").each(function(k,v){ 
						if(localStorage.shu>k){
							$(v).addClass("jiu");
						}
					});
					
					if(localStorage.shu>1){
						//大局输
						console.log("3战大局输");
						//退出房间
						//反向动画效果
						setTimeout(function(){
							go3aa();
							go3bb();
							setTimeout(function(){
								$(".said_stop").show();//大输
								del_localStorage();
								
								//失败之后 5秒转首页
								setTimeout(function(){
									window.location.href="index.php";											
								},5000);
								
							},1500);
						},1500);
					}else{
						//alert('此战输，重新选择游戏类型');
						//小输情况下，输的人负责发送监听数据
						//反向动画效果
						setTimeout(function(){
							go3aa();
							go3bb();
							setTimeout(function(){
								$(".huihe_lose").show();//小输
							},1500);
						},500);
						
						//重置master 只需选一个
						$.ajax({
							url:'index.php?ctl=game&act=ajaxvsresult',
							type:'POST',
							async: false,
							data: 'deal_id='+ data_id +'&rnum='+ Math.random(),
							dataType: "json",
							success: function(data){
								setTimeout(function(){
									send("gameend:{$data.vsuser.id}-1");
									window.location.href="index.php?ctl=game&act=doing&deal_id={$data.deal_id}";
								},3000);
							},
							error: function(){
								//alert("系统错误，请联系管理员");
							}
						});	
					}
					return;
				}
				if( my_n[2]==right_num ){
					//我赢
					localStorage.zhan=Number(localStorage.zhan) +1;
					localStorage.ying=Number(localStorage.ying) +1;
					
					//对面掉个酒瓶子
					$(".jiutop").find("img").each(function(k,v){ 
						if(localStorage.ying>k){
							$(v).addClass("jiu");
						}
					});
					if(localStorage.ying>1){
						//大局赢
						console.log("3战大局赢");
						if(<?print_r($this->_var['data']['saiduan_num'])?>==2){
							//反向动画效果
							setTimeout(function(){
								go3aa();
								go3bb();
								setTimeout(function(){
									$(".last_success").show();//大局赢
									del_localStorage();

									//大局赢之后ajax对方 gameout=2 成功之后5秒转背包
									$.ajax({
										url:'index.php?ctl=game&act=ajaxgameout',
										type:'POST',
										async: false,
										data: 'deal_id='+ data_id +'&type=888&rnum='+ Math.random(),
										dataType: "json",
										success: function(data){
											console.log(data);
											setTimeout(function(){
												window.location.href="index.php?ctl=user_center";											
											},5000);
										},
										error: function(){
											//alert("系统错误，请联系管理员");
										}
									});
									
								},1500);
							},1500);
						}else{
							//反向动画效果
							setTimeout(function(){
								go3aa();
								go3bb();
								setTimeout(function(){
									$(".said_success").show();//大赢
									del_localStorage();
									
									//大赢之后ajax对方 gameout=2 等待下一轮匹配
									$.ajax({
										url:'index.php?ctl=game&act=ajaxgameout',
										type:'POST',
										async: false,
										data: 'deal_id='+ data_id +'&type=8&rnum='+ Math.random(),
										dataType: "json",
										success: function(data){
											//等待房间内所有选手完成比赛，然后重新匹配
										},
										error: function(){
											//alert("系统错误，请联系管理员");
										}
									});	
									
								},1500);
							},1500);	
						}
						return;
					}
					//alert('此战赢，等待监听上报结果');
					//反向动画效果
					setTimeout(function(){
						go3aa();
						go3bb();
						setTimeout(function(){
							$(".huihe_success").show();//小赢
						},1500);
					},1500);
				}
			}
			//动画
			function go3a(){
				$("#my_tu1").animate({marginBottom:"0px"},800,'linear',go3a1);
				$("#my_tu2").animate({marginBottom:"0px"},800,'linear',go3a1);
			}
			function go3b(){
				$("#duimian_tu1").animate({marginTop:"0px"},800,'linear',go3b1);
				$("#duimian_tu2").animate({marginTop:"0px"},800,'linear',go3b1);
			}
			function go3a1(){
				$("#my_zi").show();
			}
			function go3b1(){
				$("#duimian_zi").show();
			}
			//反向动画
			function go3aa(){
				$("#my_tu1").animate({marginBottom:"-260px"},800,'linear');
				$("#my_tu2").animate({marginBottom:"-260px"},800,'linear');
				$("#my_zi").hide();
			}
			function go3bb(){
				$("#duimian_tu1").animate({marginTop:"-260px"},800,'linear');
				$("#duimian_tu2").animate({marginTop:"-260px"},800,'linear');
				$("#duimian_zi").hide();
			}
			//清空本地 localStorage
			function del_localStorage(){
				localStorage.zhan=1;
				localStorage.ying=0;
				localStorage.shu=0;
				localStorage.donghua=0;
				localStorage.fangqi=0;
			}
			</script>
	   </div>

	<!--neirong end-->
	
	<div class="huihe huihe_success" style="display:none;">
		<img src="youxi/images/rzjh.png" style="margin:50px auto 0;" alt="" width="90"/>
		<div class="mar-t-10"><span class="color-yellow mar-r-10"><?=$this->_var['data']['saiduan_num']/2?>/<?=$this->_var['data']['saiduan_num']?>赛段</span>第<span id="huihe_num1">null</span>回合</div>
		<div class="f14">本赛段下一回合游戏马上开始</div>
	</div>
	<!--回合胜利end-->
	
	<div class="huihe huihe_lose" style="display:none;">
		<img src="youxi/images/rzjh.png" style="margin:50px auto 0;" alt="" width="90"/>
		<div class="mar-t-10"><span class="color-yellow mar-r-10"><?=$this->_var['data']['saiduan_num']/2?>/<?=$this->_var['data']['saiduan_num']?>赛段</span>第<span id="huihe_num2">null</span>回合</div>
		<div class="f14">本赛段下一回合游戏马上开始</div>
	</div>
	<!--回合失败end-->
	
	<div class="huihe said_success" style="height:290px;display:none;">
		<img src="youxi/images/rzjh.png"style="margin:130px auto 0;" alt="" width="70"/>
		<div class="mar-t-10">正在匹配<img src="youxi/images/shuaxin.gif" style="display:inline-block; vertical-align:middle;"alt="" width="40"/></div>
		<div class="f14"><span class="color-yellow mar-r-10"><?=$this->_var['data']['saiduan_num']/4?>/<?=$this->_var['data']['saiduan_num']/2?>赛段</span>游戏马上开始</div>
	</div>
	<!--赛段胜利end-->
	
	<div class="huihe said_stop" style="height:260px;display:none;">
		<img src="youxi/images/jiu.png" style="margin:100px auto 0;" alt="" width="70"/>
		<div class="f14">-<?=$this->_var['data']['game']['origin_price']/$this->_var['data']['game']['max_buy']?>积分</div>
		<div class="f24">请您再接再励</div>
	</div>
	<!--赛段止步-->
	
	<div class="huihe last_success" style="height:280px; display:none;">
		<div class="f16" style="margin-top:110px;">恭喜获得</div>
		<img src="youxi/images/jiu.png" style="margin:0 auto" alt="" width="70"/>
		<div class="f16 mar-t-10"><?=$this->_var['data']['game']['name']?></div>
	</div>
	<!--最终胜利-->
</div>  
   
</body>
</html>